<template lang="html">
  <div class="course">
   	<ul>
      <router-link tag="div" :to="{name:'Chdetails',params:{title:item.title}}" v-for="(item,index) in Data" :key="index">
     		<li @click="demo(item)">
          <!-- <router-link tag="a" to="/Chdetails"> -->
       			<img :src="item.img" />
       			<span>{{ item.title }}</span>
          <!-- </router-link> -->
     		</li>
      </router-link>
   	</ul>
  </div>
</template>

<script>
import Data from "../../static/data/data.json"
export default {
  name:"course",
  data(){
    return{
      Data:[
        {
          img:"",
          title:"",
          id:0
        }
      ]
    }
  },
  components:{
    
  },
  methods:{
    demo(data){
      // console.log(data.title);
      sessionStorage.setItem('currentTitlt',data.title)
    }
  },
  created(){
    this.Data = Data;
    // console.log(this.Data)
    // sessionStorage.setItem('currentTitlt', JSON.stringify(this.Data.title));
    // console.log(this.Data);
  }
}
</script>

<style scoped lang="less">
.course{
	background-color: #ffffff;
	margin-bottom: 5/50rem;
	padding: 15/50rem 0;
}
.course ul{
	overflow: hidden;
}
.course ul li{
	float: left;
	text-align: center;
  font-size: 14/50rem;
}
.course ul li img{
	width: 40/50rem;
	padding: 10/50rem 17/50rem;
}
.course ul li span{
	display: block;
}

</style>
